<template>
	<view style="height: 100%;width: 100%;">
		<view class="content">
			<!-- 手机 -->
			<view class="fenlei-A">
				<view class="gd"></view>
				<view class="fenlei-A-1">精选推荐</view>
				<view class="gd"></view>
				<view
					style="width: 100%;height: 90%;display: flex;flex-direction: row;justify-content: space-between; align-items: flex-start;">
					<view style="min-width: 200rpx;max-width: 300rpx;">
						<van-sidebar :active-key="activeKey" custom-class="sidebar_class" @change="sidebarchange">
							<van-sidebar-item v-for="item in items" :key="item.id" :title="item.name" />
						</van-sidebar>
					</view>
					<view style="flex: 1;height: 90%;display: flex;justify-content: space-between; flex-wrap: wrap;">
						<view v-for="item in goodslist" style="width: 165rpx;height: 300rpx;margin: 20rpx 10rpx;background-color: #fff;border-radius: 25rpx;">
							<img :src="item.img" alt="" style="display: block; width: 165rpx;height: 200rpx;">
							<p style="display: block;width: 165rpx;height: 50rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.name}}</p>
							<p style="color: red;">{{item.price}}</p>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				activeKey: 0,
				goodslist: []
			};
		},
		methods: {
			sidebarchange(e) {
				console.log("e");
				console.log(e);
				uni.$http.get(`http://localhost:3000/fenleidetail?id=${e.detail}`).then(res => {
					console.log("res");
					console.log(res);
					this.goodslist = res.data
				})
			},
		},
		async mounted() {
			uni.$http.get("http://localhost:3000/fenlei").then(res => {
				console.log("data");
				console.log(res);
				this.items = res.data
				uni.$http.get(`http://localhost:3000/fenleidetail?id=${this.activeKey}`).then(res => {
					console.log("res");
					console.log(res);
					this.goodslist = res.data
				})
			})

		}
	};
</script>


<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: white;

		.fenlei-A {
			height: 100%;

			.sidebar_class {
				height: 80%;
			}
		}

		.fenlei-A-1 {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}

		.fenlei-A-2 {
			.fenlei-A-2-1 {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.fenlei-A-2-2 {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.gd {
			background-color: white;
			height: 40rpx;
		}
	}
</style>